<datascroller-demos></datascroller-demos>

<div class="content-section introduction">
    <div>
        <span class="feature-title">DataScroller  - Infinite</span>
        <span>DataScroller supports lazy loading via virtual scrolling so that each scroll event fetches new chunk of data from a remote datasource. This example generates
        the new records on-the-fly and scrolling is infinite.</span><br><span>Scroll to the bottom of this page to see the demo.</span>
    </div>
</div>

<div class="content-section documentation">    
    <p-tabView effect="fade">
        <p-tabPanel header="datascrollerinfinitedemo.ts">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/datascroller/datascrollerinfinitedemo.ts" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-typescript" pCode ngNonBindable>
export class DataScrollerInfiniteDemo &#123;

    cars: Car[];
    
    msgs: Message[] = [];
    
    constructor(private carService: CarService) &#123; &#125;
    
    loadData(event) &#123;
        //initialize
        if(!this.cars) &#123;
            this.carService.getCarsSmall().then(cars => this.cars = cars);
        &#125;
        //in real application, newArray should be loaded from a remote datasource
        else &#123;
            let newArray = this.cars.slice(0);
            for(let i = 0; i < newArray.length; i++) &#123;
                this.cars.push(newArray[i]);
            &#125;
            this.msgs = [];
            this.msgs.push(&#123;severity:'info', summary:'Data Loaded', detail:'Between ' + event.first + ' and ' + (event.first + event.rows)&#125;);
        &#125;        
    &#125;
&#125;
</code>
</pre>            
        </p-tabPanel>

        <p-tabPanel header="datascrollerinfinitedemo.html">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/datascroller/datascrollerinfinitedemo.html" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-growl [value]="msgs"&gt;&lt;/p-growl&gt;

&lt;p-dataScroller [value]="cars" [rows]="10" (onLazyLoad)="loadData($event)" [lazy]="true"&gt;
    &lt;p-header&gt;
        Scroll Down to to Load More
    &lt;/p-header&gt;
    &lt;ng-template let-car pTemplate="item"&gt;
        &lt;div class="ui-g car-item"&gt;
            &lt;div class="ui-g-12 ui-md-3"&gt;
                &lt;img src="assets/showcase/images/demo/car/&#123;&#123;car.brand&#125;&#125;.png"&gt;
            &lt;/div&gt;
            &lt;div class="ui-g-12 ui-md-9"&gt;
                &lt;div class="ui-g"&gt;
                    &lt;div class="ui-g-2 ui-sm-6"&gt;Vin: &lt;/div&gt;
                    &lt;div class="ui-g-10 ui-sm-6"&gt;&#123;&#123;car.vin&#125;&#125;&lt;/div&gt;

                    &lt;div class="ui-g-2 ui-sm-6"&gt;Year: &lt;/div&gt;
                    &lt;div class="ui-g-10 ui-sm-6"&gt;&#123;&#123;car.year&#125;&#125;&lt;/div&gt;

                    &lt;div class="ui-g-2 ui-sm-6"&gt;Brand: &lt;/div&gt;
                    &lt;div class="ui-g-10 ui-sm-6"&gt;&#123;&#123;car.brand&#125;&#125;&lt;/div&gt;

                    &lt;div class="ui-g-2 ui-sm-6"&gt;Color: &lt;/div&gt;
                    &lt;div class="ui-g-10 ui-sm-6"&gt;&#123;&#123;car.color&#125;&#125;&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/ng-template&gt;
&lt;/p-dataScroller&gt;
</code>
</pre>
        </p-tabPanel>
    </p-tabView>
</div>

<div class="content-section implementation">
    <p-growl [value]="msgs"></p-growl>
    
    <p-dataScroller [value]="cars" [rows]="10" (onLazyLoad)="loadData($event)" [lazy]="true" [totalRecords]="totalRecords">
        <p-header>
            Scroll Down to to Load More
        </p-header>
        <ng-template let-car pTemplate="item">
            <div class="ui-g car-item">
                <div class="ui-g-12 ui-md-3">
                    <img src="assets/showcase/images/demo/car/{{car.brand}}.png">
                </div>
                <div class="ui-g-12 ui-md-9">
                    <div class="ui-g">
                        <div class="ui-g-2 ui-sm-6">Vin: </div>
                        <div class="ui-g-10 ui-sm-6">{{car.vin}}</div>
            
                        <div class="ui-g-2 ui-sm-6">Year: </div>
                        <div class="ui-g-10 ui-sm-6">{{car.year}}</div>
            
                        <div class="ui-g-2 ui-sm-6">Brand: </div>
                        <div class="ui-g-10 ui-sm-6">{{car.brand}}</div>
            
                        <div class="ui-g-2 ui-sm-6">Color: </div>
                        <div class="ui-g-10 ui-sm-6">{{car.color}}</div>
                    </div>
                </div>
            </div>
        </ng-template>
    </p-dataScroller>
</div>